<template>
	<view class="zone">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="main">
			<!-- 头部信息栏 -->
			<view class="home_tou">
				<view class="home_img">

					<view class="home_image" @click="$p.navto('/pages/index/my')">
						<image class="myHeader" :src="userinfo.avatar" mode="widthFix"></image>
						<view class="home_my">
							我的
						</view>
					</view>

					<view class="home_info" @click="$p.navto('/pages/index/exclusPrivilege')">
						<view class="home_id">
							ID:{{userinfo.invite_code}}
						</view>
						<view class="home_Vip">
							{{vip==0?'暂无':vip==1?'超凡脱俗':vip==2?'天骄之王':vip==3?'天劫高手':vip==4?'万古仙人':vip==5?'天启圣者':vip==6?'绝对掌控':vip==7?'永恒传说':vip==8?'神界至尊':vip==9?'永恒纪元':'暂无'}}
						</view>
						<image
							:src="advImg==0?'http://image.qxgm.site/tdz/img/tk/mg-13.png':'http://image.qxgm.site/tdz/img/tk/mg-14.png'"
							class="tvimg" mode="widthFix"></image>
					</view>

				</view>
				<view class="home_right">
					<view class="home_nav" @click="$p.navto('/pages/index/xianyuBalance?id=3')">
						<image class="home_navimg" src="http://image.qxgm.site/tdz/img/tk/mg-04.png" mode="widthFix">
						</image>
						<text class="home_num">{{dealWith(userinfo.tongqian)}}</text>
						<image class="home_more" src="http://image.qxgm.site/tdz/img/public/mg-04.png" mode="widthFix">
						</image>
					</view>
					<view class="home_nav" @click="$p.navto('/pages/index/xianyuBalance?id=2')">
						<image class="home_navimg" src="http://image.qxgm.site/tdz/img/tk/mg-01.png" mode="widthFix">
						</image>
						<text class="home_num">{{dealWith(userinfo.shenshi)}}</text>
						<image class="home_more" src="http://image.qxgm.site/tdz/img/public/mg-04.png" mode="widthFix">
						</image>
					</view>
					<view class="home_nav" @click="$p.navto('/pages/index/xianyuBalance?id=1')">
						<image class="home_navimg" src="http://image.qxgm.site/tdz/img/tk/mg-03.png" mode="widthFix">
						</image>
						<text class="home_num">{{dealWith(userinfo.lingshi)}}</text>
						<image class="home_more" src="http://image.qxgm.site/tdz/img/public/mg-04.png" mode="widthFix">
						</image>
					</view>
					<view class="home_nav" @click="$p.navto('/pages/index/luckyValue')">
						<image class="home_navimg" src="http://image.qxgm.site/tdz/img/tk/mg-02.png" mode="widthFix">
						</image>
						<text class="home_num">{{dealWith(userinfo.luck_num)}}</text>
						<image class="home_more" src="http://image.qxgm.site/tdz/img/public/mg-04.png" mode="widthFix">
						</image>
					</view>
				</view>
			</view>

			<!-- 公告 -->
			<view class="home_notice">
				<u-notice-bar type='none' padding='18rpx 60rpx 18rpx 100rpx' :volume-icon="false" :list="NoticeList"
					color='#674008' font-size='24'></u-notice-bar>
			</view>
			<!-- 人物和导航 -->
			<view class="home_char">

				<!-- 左侧导航 -->
				<view class="home_leftNav">
					<image @click="$p.navto('/pages/index/theCharts')"
						src="http://image.qxgm.site/tdz/img/home/mg-5.png" mode="widthFix">
					</image>
					<image @click="$p.navto('/pages/index/strategy')" src="http://image.qxgm.site/tdz/img/home/mg-1.png"
						mode="widthFix">
					</image>
					<image @click="$p.navto('/pages/index/ChinaCEO')" src="http://image.qxgm.site/tdz/img/home/mg-3.png"
						mode="widthFix">
					</image>
					<image @click="$p.navto('/pages/index/market')" src="http://image.qxgm.site/tdz/img/home/mg-4.png"
						mode="widthFix">
					</image>
				</view>
				<!-- 右侧导航 -->
				<view class="home_rightNav">
					<image @click="$p.navto('/pages/index/commGroups')"
						src="http://image.qxgm.site/tdz/img/home/mg-10.gif" mode="widthFix"></image>
					<image @click="$p.navto('/pages/index/promotion_activit')"
						src="http://image.qxgm.site/tdz/img/home/mg-06.gif" mode="widthFix">
					</image>
					<image @click="$p.navto('/pages/index/achieveRewards')"
						src="http://image.qxgm.site/tdz/img/tk/mg-05.png" mode="widthFix"></image>
					<image @click="$p.navto('/pages/index/invite')" src="http://image.qxgm.site/tdz/img/home/mg-7.png"
						mode="widthFix">
					</image>

				</view>

				<view class="home_level">
					<view class="home_force">
						战力：{{userinfo.all_fight}}
					</view>
					<!-- 	<view class="improve" @click="openzhanli">
						提升战力
					</view> -->
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="improve"
						@click="openzhanli">提升战力</u-button>
				</view>
				<view class="lvmy">
					{{grade_name}}{{grade_level}}
				</view>

				<view class="renboxx">
					<image v-if="renimg!=0" class="char_img" :src="`http://image.qxgm.site/tdz/img/home/${renimg}.gif`"
						mode="widthFix">
					</image>
					<!-- 	<image v-if="renimg!=0" class="char_img" src="http://image.qxgm.site/tdz/img/home/33.gif"
						mode="widthFix">
					</image> -->

				</view>

				<view class="xiuwei_info">
					<!-- 进度条 -->
					<view class="jindu">
						<view class="jinlink" v-if="userinfo.experience/userinfo.up_experience<1"
							:style="{'width':width(userinfo.experience,userinfo.up_experience) +'%'}">
							<!-- 光点 -->
							<view class="xuebitu">
							</view>
						</view>
						<view v-else class="jinlink2" :style="{'width':100+'%'}"></view>
					</view>

					<view v-if="userinfo.experience>=userinfo.up_experience" @click="breakThrough" class="add2">突破
					</view>
					<u-button v-else :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
						class="add1" @click="openXwbag">增加修为</u-button>

				</view>


				<view class="home_tip" v-if="guideList.length!=0" @click="guideRece(guideList)">
					<text class="home_p">{{guideList.content}}</text>
					<view class="getLevel">{{guideList.state==0?'前往':guideList.state==1?'领取':''}}</view>
				</view>


			</view>


		</view>
		<!-- 底部导航栏 -->
		<view class="home_bottomNav">
			<view class="red" v-if="add_num != 0 || help_num != 0 || mail_num != 0"></view>
			<image @click="$p.navto('/pages/index/friends')" src="http://image.qxgm.site/tdz/img/tk/mg-07.png"
				mode="widthFix">
			</image>
			<image @click="$p.navto('/pages/index/cultivationGame')" src="http://image.qxgm.site/tdz/img/tk/mg-08.png"
				mode="widthFix">
			</image>
			<image @click="shengxian" src="http://image.qxgm.site/tdz/img/tk/mg-09.png" mode="widthFix">
			</image>
			<image @click="$p.navto('/pages/index/transferTo')" src="http://image.qxgm.site/tdz/img/tk/mg-10.png"
				mode="widthFix">
			</image>
			<image @click="$p.navto('/pages/index/knapsack')" src="http://image.qxgm.site/tdz/img/tk/mg-11.png"
				mode="widthFix">
			</image>
		</view>
		<u-tabbar v-model="current" :border-top="false" :list="list" :mid-button="true"></u-tabbar>

		<!-- 修为背包 -->
		<u-mask :show="choose" :zoom='false' @click="choose = false">
			<view :class="['warp3',choose==true?'showHandler':'hideHandler'] " @tap.stop>
				<view class="iconbg" @click="gomijin">
					<image src="http://image.qxgm.site/tdz/img/tk/san2.png" mode="widthFix" class="img zy"></image>
					<view class="p1">获取材料</view>
				</view>
				<image class="yun_mask" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="mask_content3">
					<view class="m_info3">
						<view class="title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
							<text>背包</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
						</view>
						<view class="caolist">
							<view class="link" v-for="(item,index) in xiuweiList" :key="index" @click="chooseDan(item)">
								<view :class="['cparts',chooseId==item.props_id?'cpart':'']">
									<image class="cq1" src="http://image.qxgm.site/tdz/img/liandan/mg-08.png"
										mode="widthFix"></image>
									<view class="num">x{{parseInt(item.number)}}</view>
								</view>
								<view class="cname">{{item.props.name}}</view>
							</view>
							<view class="empty" v-if="xiuweiList.length==0">
								<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
								暂无数据
							</view>
						</view>
						<view class="dfaic">
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
								class="sendAll1" @click="oneUse">使用</u-button>
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
								class="sendAll2" @click="allUse">一键使用</u-button>
						</view>

					</view>
				</view>
				<image class="m_close3" @click="closeChoose" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
			</view>
		</u-mask>

		<!-- 战力背包 -->
		<u-mask :show="choose2" :zoom='false' @click="choose2 = false">
			<view :class="['warp3',choose2==true?'showHandler':'hideHandler'] " @tap.stop>
				<image class="yun_mask" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="mask_content3">
					<view class="m_info3">
						<view class="title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
							<text>背包</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
						</view>
						<view class="caolist">
							<view class="link" v-for="(item,index) in zhanliList" :key="index"
								@click="chooseDan2(item)">
								<view :class="['cparts',chooseId2==item.props_id?'cpart':'']">
									<image class="cq1" src="http://image.qxgm.site/tdz/img/liandan/mg-08.png"
										mode="widthFix"></image>
									<view class="num">x{{parseInt(item.number)}}</view>
								</view>
								<view class="cname">{{item.props.name}}</view>
							</view>
							<view class="empty" v-if="xiuweiList.length==0">
								<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
								暂无数据
							</view>
						</view>
						<view class="dfaic">
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
								class="sendAll1" @click="oneUse2">使用</u-button>
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
								class="sendAll2" @click="allUse2">一键使用</u-button>
						</view>

					</view>
				</view>
				<image class="m_close3" @click="closeChoose2" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
			</view>
		</u-mask>

		<!-- 恭喜获得 -->
		<u-mask :show="getzhanli" @click="getzhanli = false">
			<view class="warp2" @tap.stop>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/youchai/mg-7.png" mode="widthFix"></image>
				<view class="mask_content2">
					<view class="m_info2">
						<view class="plistss">
							<view class="clst1">
								恭喜您！
							</view>
							<view class="clst2">
								提升了<text class="tcolor">{{huodzhanli}}</text>战力
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="refineCon2" @click="getzhanli=false">确定</u-button>
					</view>
				</view>
				<image class="mask3" src="http://image.qxgm.site/tdz/img/youchai/mg-9.png" mode="widthFix"></image>
				<view class="dianjireny" @click="getzhanli = false">
					点击任意位置退出
				</view>
			</view>
		</u-mask>


		<!-- 突破 -->
		<u-mask :show="through" @click="through = false">
			<view class="through" @tap.stop>
				<view class="m_close4" @click="through = false">点击任意位置退出</view>
				<image src="http://image.qxgm.site/tdz/img/tk/mg-18.png" mode="widthFix" class="img"></image>
				<view class="box">
					<view class="titlebox">
						<view class="p1">{{nowName}}{{nowName2}}</view>
						<image src="http://image.qxgm.site/tdz/img/tk/mg-21.png" mode="widthFix"></image>
						<view class="p1">{{upName}}{{upName2}}</view>
					</view>
					<view class="title">消耗材料</view>
					<view class="caolist">
						<view class="link" v-for="(item,index) in smallList" :key="index">
							<view class="cparts">
								<image class="cq1" :src="item.img" mode="widthFix"></image>
								<view class="num"><text>{{parseInt(item.number)}}</text>/{{item.need_num}}</view>
							</view>
							<view class="cname">{{item.name}}</view>
						</view>
					</view>
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="sendAll2"
						@click="tupo(1)">突破</u-button>

				</view>
			</view>
		</u-mask>


		<!-- 境界突破 -->
		<u-mask :show="realm" @click="realm = false">
			<view class="through" style="top: 7%;" @tap.stop>
				<view class="m_close4" @click="realm = false">点击任意位置退出</view>
				<image src="http://image.qxgm.site/tdz/img/tk/mg-17.png" mode="widthFix" class="img"></image>
				<scroll-view scroll-y class="box" style="padding: 0;max-height: 60vh">
					<view class="titlebox">
						<view class="p1">{{nowName}}{{nowName2}}</view>
						<image src="http://image.qxgm.site/tdz/img/tk/mg-21.png" mode="widthFix"></image>
						<view class="p1">{{upName}}{{upName2}}</view>
					</view>
					<view class="title1">
						<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" class="img2"></image>
						<view class="sgabb">选择突破方式</view>
						<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" class="img2"></image>
					</view>
					<view class="bgbox">
						<view class="title">常规突破</view>
						<view class="caolist">
							<view class="link" v-for="(item,index) in smallList" :key="index">
								<view class="cparts">
									<image class="cq1" :src="item.img" mode="widthFix"></image>
									<view class="num"><text
											:class="[item.number>=item.need_num?'text2':'text1']">{{Math.floor(item.number)}}</text>/{{item.need_num}}
									</view>
								</view>
								<view class="cname">{{item.name}}</view>
							</view>
						</view>
						<view class="bfb">成功率:<text>{{success1}}%</text></view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="sendAll1" @click="tupo(1)">突破</u-button>
					</view>
					<view class="bgbox" style="margin-top: 10px;">
						<view class="title">天道突破</view>
						<view class="caolist">
							<view class="link" v-for="(item,index) in bigList" :key="index">
								<view class="cparts">
									<image class="cq1" :src="item.img" mode="widthFix"></image>
									<view class="num"><text
											:class="[item.number>=item.need_num?'text2':'text1']">{{Math.floor(item.number)}}</text>/{{item.need_num}}
									</view>
								</view>
								<view class="cname">{{item.name}}</view>
							</view>
						</view>
						<view class="bfb">成功率:<text>{{success2}}%</text></view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="sendAll2" @click="tupo(2)">天道突破</u-button>
					</view>
				</scroll-view>
			</view>
		</u-mask>
		<!-- 首次登录 -->
		<u-mask :show="beta">
			<view class="loginimg">
				<image src="http://image.qxgm.site/tdz/img/tk/tkbj.png" mode="widthFix" class="img"></image>
				<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="sendAll3"
					@click="betaclose">领取奖励</u-button>
			</view>
		</u-mask>


		<!-- 小突破成功 -->
		<u-mask :show="smallSuccess">
			<view class="through" style="top: 20%;">
				<image src="http://image.qxgm.site/tdz/img/home/success.gif" mode="widthFix" class="img"></image>
				<view class="box">
					<view class="titlebox">
						<view class="p1">{{nowName}}{{nowName2}}</view>
						<image src="http://image.qxgm.site/tdz/img/tk/mg-21.png" mode="widthFix"></image>
						<view class="p1">{{upName}}{{upName2}}</view>
					</view>
					<view class="zhanlitac">战力+{{fight_num}}</view>
					<view class="sendAll2" @click="smallSuccess = false">确定</view>
				</view>
				<view class="m_close4" @click="smallSuccess = false">点击任意位置退出</view>

			</view>
		</u-mask>

		<!-- 大突破成功 -->
		<u-mask :show="bigSuccess" @click="bigSuccess=false">
			<view class="biginfo">
				<image class="bsimg" src="http://image.qxgm.site/tdz/img/home/bigsuccess2.gif" mode="widthFix"></image>
			</view>
		</u-mask>

		<!-- 大突破失败 -->
		<u-mask :show="bigFail" @click="bigFail=false">
			<view class="biginfo">
				<image class="bsimg" src="http://image.qxgm.site/tdz/img/home/bigfail2.gif" mode="widthFix"></image>
			</view>
		</u-mask>


		<!-- 恭喜获得 -->
		<u-mask :show="obtain" @click="obtain = false">
			<view class="warp2" @tap.stop>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/youchai/mg-7.png" mode="widthFix"></image>
				<view class="mask_content2">
					<view class="m_info2">
						<view class="plist">

							<view class="parts">
								<view class="sbimg">
									<image class="tanimg" :src="yindaoimg" mode="widthFix">
									</image>
								</view>
								<view class="toan">
									{{yindaoname}}x{{yindaonum}}
								</view>
							</view>

						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="refineCon2" @click="obtain=false">确定</u-button>

					</view>
				</view>
				<image class="mask3" src="http://image.qxgm.site/tdz/img/youchai/mg-9.png" mode="widthFix"></image>
				<view class="dianjireny" @click="obtain = false">
					点击任意位置退出
				</view>
			</view>
		</u-mask>

	</view>
</template>

<script>
	import config from '@/common/config/index'
	export default {
		data() {
			return {
				getzhanli: false,
				obtain: false,
				bigSuccess: false,
				bigFail: false,
				smallSuccess: false, //小突破成功
				fight_num: '',
				redshow: false, //红点
				choose: false,
				choose2: false,
				chooseId: -1,
				chooseId2: -1,
				through: false,
				realm: false,
				current: 1,
				beta: false,
				userinfo: uni.getStorageSync('userinfo'),
				NoticeList: [],
				list: [{
						iconPath: "http://image.qxgm.site/tdz/img/tabbar/1.png",
						selectedIconPath: "http://image.qxgm.site/tdz/img/tabbar/11.png",
						text: '',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/home',
					},
					{
						iconPath: "http://image.qxgm.site/tdz/img/tabbar/2.png",
						selectedIconPath: "http://image.qxgm.site/tdz/img/tabbar/22.png",
						text: '',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/experience',
					},
					{
						iconPath: "http://image.qxgm.site/tdz/img/tabbar/4.png",
						selectedIconPath: "http://image.qxgm.site/tdz/img/tabbar/44.png",
						text: '',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/equip',
					},
					{
						iconPath: "http://image.qxgm.site/tdz/img/tabbar/3.png",
						selectedIconPath: "http://image.qxgm.site/tdz/img/tabbar/33.png",
						text: '',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tabbar/game',
					}
				],
				tongqian: '',
				shenshi: '',
				lingshi: '',
				xingyun: '',
				grade_name: '',
				grade_level: '',
				experience: '',
				up_experience: '',
				smallList: [], //突破
				bigList: [], //境界突破
				nowName: '', //当前境界
				nowName2: '', //当前境界
				upName: '', //下一境界
				upName2: '', //下一境界
				success1: '',
				success2: '',
				xiuweiList: [],
				zhanliList: [],
				muteBgMusic: false, //静音
				advImg: '', //广告vip
				vip: '', //vip
				renimg: '', //人物ID
				data: uni.getStorageSync('data'),

				guideList: {}, //引导任务列表
				yindaoname: '', //引导任务列表
				yindaonum: '', //引导任务列表
				yindaoimg: '', //引导任务列表
				user_task_id: '', //引导任务列表
				add_num: '',
				help_num: '',
				mail_num: '',

				huodzhanli: '',
			}
		},
		onShow() {
			this.getUserInfo();
			this.getNews();
			this.getyindaoList(); //引导
			this.hasnewmail()
		},
		watch: {
			muteBgMusic(newValue, oldValue) {
				if (newValue) {
					// 开启静音
					this.$music.playBgm({
						mute: true
					});
				} else {
					// 关闭 静音
					this.$music.playBgm({
						mute: false
					});
				}
			}
		},
		onReady() {
			if (!uni.getStorageSync('is_music') || uni.getStorageSync('is_music') == true) {
				this.$music.playBgm({
					mute: false
				})
			} else {
				this.$music.playBgm({
					mute: true
				});
			}

		},
		onLoad() {
			this.data = uni.getStorageSync('data')
			if (this.data == true) {
				this.beta = true
			} else {
				this.beta = false
			}


		},
		mounted() {
			uni.pageScrollTo({
				scrollTop: 200,
				duration: 100
			});
		},
		methods: {
			async shengxian() {
				let res = await this.$http.index.shenxingcheck()
				if (res.code == 1) {
					if (res.data.is_open == 1) {
						this.$p.navto('/pages/index/assembly')
					} else {
						this.$u.toast('暂未开放！敬请期待！')
					}
				}
			},
			//是否有新邮件
			async hasnewmail() {
				let res = await this.$http.index.hasnewmail()
				if (res.code == 1) {
					this.add_num = res.data.add_num
					this.help_num = res.data.help_num
					this.mail_num = res.data.mail_num
				}
			},
			async getyindaoList() {
				let res = await this.$http.index.guidetask()
				if (res.code == 1) {
					this.guideList = res.data
				}
			},
			//跳转修秘境
			gomijin() {
				this.choose = false
				uni.navigateTo({
					url: '/pages/index/zlrealm?id=1&name=明轮域',
				});
			},
			//领取
			betaclose() {
				this.$u.toast('领取成功!')
				this.beta = false
				uni.setStorageSync('data', false)
			},
			// 数量过万处理
			dealWith(value) {
				value = Number(value)
				var num;
				if (value > 9999) { //大于9999显示x.xx万
					num = (Math.floor(value / 100) / 100) + '万';
				} else if (value <= 9999 && value > -9999) {
					num = value
				} else if (value < -9999) { //小于-9999显示-x.xx万
					num = -(Math.floor(Math.abs(value) / 1000) / 10) + '万'
				}
				return num;
			},
			// 进度条宽度处理
			width(num, num_max) {
				if (num > num_max) {
					return 100
				} else {
					var h = (num / num_max) * 100
					return h
				}
			},

			// 获取个人信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.userinfo = res.data
					this.advImg = res.data.free_ad
					this.vip = res.data.vip
					if (res.data.level >= 1 && res.data.level <= 4) {
						this.renimg = 1
					} else if (res.data.level >= 5 && res.data.level <= 8) {
						this.renimg = 2
					} else if (res.data.level >= 9 && res.data.level <= 12) {
						this.renimg = 3
					} else if (res.data.level >= 13 && res.data.level <= 16) {
						this.renimg = 4
					} else if (res.data.level >= 17 && res.data.level <= 20) {
						this.renimg = 5
					} else if (res.data.level >= 21 && res.data.level <= 24) {
						this.renimg = 6
					} else if (res.data.level >= 25 && res.data.level <= 28) {
						this.renimg = 7
					} else if (res.data.level >= 29 && res.data.level <= 32) {
						this.renimg = 8
					} else if (res.data.level >= 33 && res.data.level <= 36) {
						this.renimg = 9
					} else if (res.data.level >= 37 && res.data.level <= 40) {
						this.renimg = 10
					} else if (res.data.level >= 41 && res.data.level <= 44) {
						this.renimg = 11
					} else if (res.data.level >= 45 && res.data.level <= 48) {
						this.renimg = 12
					}

					uni.setStorageSync('userinfo', res.data)
					uni.setStorageSync('invite_code', res.data.invite_code)
					uni.setStorageSync('id', res.data.id)
					this.grade_name = res.data.level_detail.grade_name
					this.grade_level = res.data.level_detail.grade_level

				}
			},
			// 获取公告
			async getNews() {
				let res = await this.$http.index.getNewsList()
				if (res.code == 1) {
					let arr = []
					arr.push(res.data)
					this.NoticeList = arr
				}
			},
			// 单个修为丹的id
			chooseDan(item) {
				console.log(item);
				this.chooseId = item.props_id
			},
			// 单个战力丹的id
			chooseDan2(item) {
				console.log(item);
				this.chooseId2 = item.props_id
			},
			// 打开战力弹框列表
			async openzhanli() {
				// todo 请求修为丹列表接口
				let res = await this.$http.index.zhanliupdate()
				this.zhanliList = res.data
				this.choose2 = true
			},
			// 打开增加修为弹框列表
			async openXwbag() {
				// todo 请求修为丹列表接口
				let res = await this.$http.index.xiuweiupdate()
				this.xiuweiList = res.data
				this.choose = true
			},
			// 使用单个修为丹
			async oneUse() {
				if (this.chooseId == '-1') {
					this.$u.toast('请先选择丹药')
					return
				}
				let res = await this.$http.index.useonexiuwei({
					props_id: this.chooseId
				})
				if (res.code == 1) {
					this.openXwbag()
					this.getUserInfo();
					this.chooseId = -1

					// console.log(this.guideList);
					if (this.guideList.index == 2) {
						this.getyindaoList(); //引导
					}


				}
				this.$u.toast(res.msg)

			},
			// 使用单个战力丹
			async oneUse2() {
				if (this.chooseId2 == '-1') {
					this.$u.toast('请先选择丹药')
					return
				}
				let res = await this.$http.index.useonezhanli({
					props_id: this.chooseId2
				})
				if (res.code == 1) {
					this.openzhanli()
					this.getUserInfo();
					// this.chooseId2 = -1
					this.huodzhanli = res.data
					this.getzhanli = true
				} else {
					this.$u.toast(res.msg)
				}


			},
			// 使用全部修为丹
			async allUse() {
				let res = await this.$http.index.useallxiuwei()
				if (res.code == 1) {
					this.openXwbag()
					this.getUserInfo();
					this.chooseId = -1
					if (this.guideList.index == 2) {
						this.getyindaoList(); //引导
					}
				}
				this.$u.toast(res.msg)

			},
			// 使用全部战力丹
			async allUse2() {
				let res = await this.$http.index.useallzhanli()
				if (res.code == 1) {
					this.openzhanli()
					this.getUserInfo();
					this.chooseId2 = -1
					this.huodzhanli = res.data
					this.getzhanli = true
				} else {
					this.$u.toast(res.msg)
				}

			},
			// 打开突破弹框详情
			async breakThrough() {
				let res = await this.$http.index.updetail()
				if (res.code == 1) {
					this.smallList = res.data.basic_data.props
					this.success1 = res.data.basic_data.rate.toFixed(2)
					this.nowName = res.data.grade.grade_name
					this.nowName2 = res.data.grade.grade_level
					this.upName = res.data.up_grade.grade_name
					this.upName2 = res.data.up_grade.grade_level
					if (res.data.senior_data.length == 0) {
						this.through = true
					} else {
						this.realm = true
						this.bigList = res.data.senior_data.props
						this.success2 = res.data.senior_data.rate
							.toFixed(2)
					}
				}
			},
			// 确定突破
			async tupo(type) {
				let res = await this.$http.index.gradeup({
					type: type
				})
				if (type == 1) {
					if (res.code == 1) {
						if (res.data.is_success == true) {
							this.through = false
							this.realm = false
							if (res.data.grade_level == '初期') {
								this.bigSuccess = true
							} else {
								this.fight_num = res.data.fight_num
								this.smallSuccess = true
							}
							this.getUserInfo();
							if (this.guideList.index == 3 || this
								.guideList.index == 9 || this.guideList.index == 17 || this.guideList.index == 21 ||
								this.guideList.index == 25) {
								this.getyindaoList(); //引导
							}
						} else {
							// this.$u.toast(res.msg)
							this.bigFail = true
							this.realm = false
						}

					} else if (res.msg = '突破材料不足') {
						this.$u.toast(res.msg)
					} else {
						this.through = false
						this.realm = false

					}
				} else {
					if (res.code == 1) {
						if (res.data.is_success == true) {
							this.through = false
							this.realm = false
							this.getUserInfo();
							this.bigSuccess = true
							if (this.guideList.index == 3 || this
								.guideList.index == 9 || this.guideList.index == 17 || this.guideList.index == 21 ||
								this.guideList.index == 25) {
								this.getyindaoList(); //引导
							}
						} else {
							this.bigFail = true
						}
					} else {
						this.$u.toast(res.msg)
					}

				}

			},
			// 关闭增加修为弹框列表
			closeChoose() {
				this.choose = false
				this.chooseId = -1
			},
			// 关闭增加战力弹框列表
			closeChoose2() {
				this.choose2 = false
				this.chooseId2 = -1
			},
			// 首页引导任务领取
			guideRece(item) {
				console.log(item);
				if (item.state == 0) {
					// 前往
					if (item.link == '/') {
						if (item.index == 2) {
							this.openXwbag()
						}
					} else {
						if (item.index != 7) {
							this.$p.navto(item.link)
						} else {
							uni.switchTab({
								url: item.link,
								animationType: 'none',
								animationDuration: 10
							})
						}

					}

				} else if (item.state == 1) {
					// 领取
					if (item.reward_type == 1) {
						this.yindaoimg = item.props.img
						this.yindaoname = item.props.name
					} else if (item.reward_type == 2) {
						this.yindaoimg =
							'http://image.qxgm.site/tdz/img/tk/mg-04.png'
						this.yindaoname = '铜钱'
					} else if (item.reward_type == 3) {
						this.yindaoimg =
							'http://image.qxgm.site/tdz/img/active/3.png'
						this.yindaoname = '零钱'
					} else if (item.reward_type == 4) {
						this.yindaoimg =
							'http://image.qxgm.site/tdz/img/active/mg-03.png'
						this.yindaoname = '灵石'
					} else if (item.reward_type == 5) {
						this.yindaoimg =
							'http://image.qxgm.site/tdz/img/public/mg-02.png'
						this.yindaoname = '神石'
					}
					this.yindaonum = parseInt(item.reward)
					this.user_task_id = item.user_task_id
					this.getTece()
				}
			},
			// 发送领取请求
			async getTece() {
				let res = await this.$http.index
					.guidetaskRece({
						user_task_id: this.user_task_id
					})
				if (res.code == 1) {
					this.obtain = true
					this.getyindaoList(); //引导
				} else {
					this.$u.toast(res.msg)
				}
			}
		}
	}
</script>

<style lang="less">
	.jwidth {
		width: 80%;
	}

	.zone {
		background: url('http://image.qxgm.site/tdz/img/home/bg.png') no-repeat;
		background-size: 100% 100%;
		min-height: 100vh;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.main {
		padding-bottom: 200px;
		height: 100%;
	}

	.zhanlitac {
		text-align: center;
		margin-top: 30px;
		margin-bottom: 10px;
		font-size: 22px;
		color: red;
		line-height: 24px;
	}

	.home_tou {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.home_img {
		display: flex;
		align-items: center;
		width: 43%;
		padding: 0 0 0 6px;
		background: url(http://image.qxgm.site/tdz/img/home/fmy.png) no-repeat;
		background-size: 100% 100%;
		position: relative;


	}

	.home_image {
		position: relative;
	}

	.home_my {
		position: absolute;
		bottom: -5px;
		left: 50%;
		transform: translateX(-50%);
		background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
		background-size: 100% 100%;
		font-size: 12px;
		font-weight: normal;
		color: #fefbca;
		width: 40px;
		height: 18px;
		text-align: center;
		line-height: 18px;
	}

	.home_right {
		width: 57%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: flex-end;
		padding: 5px 8px 0 0;
	}

	.myHeader {
		width: 58px;
		height: 58px;
		border-radius: 50%;
	}

	.home_nav {
		width: 49%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/public/btn1.png) no-repeat;
		background-size: 100% 100%;
		margin-bottom: 5px;
		padding: 2px 3px;
		box-sizing: border-box;
	}

	.home_navimg {
		width: 25px;
	}

	.home_more {
		width: 18px;
	}

	.home_info {
		position: relative;
		margin-top: 2px;

		.tvimg {
			position: absolute;
			right: -15px;
			bottom: -9px;
			width: 37%;
		}
	}

	.home_id {
		font-size: 15px;
		font-weight: normal;
		color: #FFFFFF;
		margin-left: 5px;
	}


	.home_Vip {
		color: #FFFC8A;
		text-shadow: 0 1px 1px #530B0C;
		background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
		background-size: 100% 100%;
		font-size: 14px;
		text-align: center;
		margin-top: 2px;
		padding: 0 4px;
		box-sizing: border-box;
		display: inline-block;
		margin-top: 5px;
	}

	.home_num {
		font-size: 12px;
		font-weight: normal;
		color: #fff;
	}

	.home_notice {
		position: relative;
		margin-top: 24px;
		background: url(http://image.qxgm.site/tdz/img/home/notice.png) no-repeat;
		background-size: 100% 100%;
		padding: 10px 10px 20px;
	}

	.home_char {
		width: 100%;
		position: relative;
		text-align: center;
	}

	.home_level {
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 50%;
		background: url(http://image.qxgm.site/tdz/img/home/mg-mid.png) no-repeat;
		background-size: 100% 100%;
		padding: 2px 0 2px;

		.home_force {
			font-size: 14px;
			font-weight: normal;
			color: #fff;
		}
	}

	.lvmy {
		position: absolute;
		left: 20%;
		top: 7%;
		word-wrap: break-word;
		/*英文的时候需要加上这句，自动换行*/
		/*自测了这句话没啥用*/
		writing-mode: vertical-rl;
		/*从左向右 从右向左是 writing-mode: vertical-rl;*/
		writing-mode: tb-rl;
		/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
		text-align: center;
		padding: 0px;
		display: flex;
		font-size: 16px;
		color: #fff;
		-webkit-display: flex;
		flex-direction: column;
		justify-content: center;
		width: 30px;
		height: 100px;
		background: url(http://image.qxgm.site/tdz/img/tk/mg-12.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		z-index: 10;
	}

	.improve {
		width: 74px;
		font-size: 12px !important;
		height: 27px !important;
		font-weight: normal;
		color: #fefbca;
		line-height: 27px;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.home_tip {
		display: inline-block;
		position: relative;
		width: 94%;
		background: url(http://image.qxgm.site/tdz/img/home/mg-ti.png) no-repeat;
		background-size: 100% 100%;
		text-align: center;
		padding: 20px 0 32px;
		z-index: 12;
	}

	.xiuwei_info {
		position: relative;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 6%;
	}

	.getLevel {
		display: block;
		position: absolute;
		right: 0;
		top: 16px;
		width: 60px;
		font-size: 12px;
		line-height: 22px;
		height: 22px;
		font-weight: normal;
		color: #fefbca;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
		z-index: 11;
	}

	.jindu {
		position: relative;
		width: 80%;
		height: 20px;
		padding: 0 2.6%;
		box-sizing: border-box;
		background: url(http://image.qxgm.site/tdz/img/tk/mg-15.png) no-repeat;
		background-size: 100% 100%;
	}

	.jinlink {
		position: relative;
		height: 19px;
		background: url(http://image.qxgm.site/tdz/img/tk/mg-16.png);
		background-size: auto 100%;
	}

	.jinlink2 {
		position: absolute;
		left: 1px;
		top: -4px;
		width: 100%;
		height: 27px;
		background: url(http://image.qxgm.site/tdz/img/tk/mg-555.png);
		background-size: 100% auto;
		animation: changesbig 1s steps(11) infinite;
	}

	.xuebitu {
		width: 12px;
		height: 18px;
		position: absolute;
		top: 0px;
		right: -6px;
		background: url(http://image.qxgm.site/tdz/img/tk/xuebi.png) no-repeat;
		background-size: 100% auto;
		background-repeat: no-repeat;
		animation: changesbig 1s steps(5) infinite;
	}

	@keyframes changesbig {

		/* 这个0%表示开始状态 */
		0% {
			background-position: 0 0;
		}

		/* 这个100%表示结束状态 */
		100% {
			background-position: 0 100%;
		}
	}

	@keyframes changesbig2 {

		/* 这个0%表示开始状态 */
		0% {
			background-position: 0 0;
		}

		/* 这个100%表示结束状态 */
		100% {
			background-position: 0 100%;
		}
	}

	.add1 {
		width: 60px;
		font-size: 12px !important;
		line-height: 22px;
		height: 22px !important;
		font-weight: normal;
		color: #fefbca;
		background: url(http://image.qxgm.site/tdz/img/public/lan.png) no-repeat;
		background-size: 100% 100%;
	}

	.add2 {
		width: 60px;
		font-size: 12px;
		line-height: 22px;
		height: 22px;
		font-weight: normal;
		color: #fefbca;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.dfaic {
		display: flex;
		align-items: center;
	}


	.home_p {
		font-size: 12px;
		font-weight: normal;
		color: #FEFADF;
		text-align: center;
	}

	.home_leftNav {
		width: 16%;
		position: absolute;
		left: 9px;
		top: 0;
		z-index: 999;

		image {
			width: 100%;
			margin-bottom: 24%;
		}
	}

	.home_rightNav {
		width: 16%;
		position: absolute;
		right: 9px;
		top: 0;
		z-index: 999;

		image {
			width: 100%;
			margin-bottom: 24%;
		}
	}

	// #ifdef H5
	.home_bottomNav {
		width: 100%;
		position: fixed;
		bottom: 100px;
		left: 50%;
		transform: translateX(-50%);
		max-width: 480px;
		background: url(http://image.qxgm.site/tdz/img/home/mg-di.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 9px 9px 13px;
		box-sizing: border-box;
		z-index: 11;

		.red {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: red;
			position: absolute;
			left: 14%;
			z-index: 9;
			top: 15px;
		}

		image {
			width: 18%;
		}
	}

	// #endif 

	// #ifdef APP-PLUS
	.home_bottomNav {
		width: 100%;
		position: fixed;
		bottom: 80px;
		left: 50%;
		transform: translateX(-50%);
		max-width: 480px;
		background: url(http://image.qxgm.site/tdz/img/home/mg-di.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 9px 9px 13px;
		box-sizing: border-box;
		z-index: 11;

		.red {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: red;
			position: absolute;
			left: 14%;
			z-index: 9;
			top: 15px;
		}

		image {
			width: 18%;
		}
	}

	// #endif 


	//背包
	.warp3 {
		width: 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);

		.iconbg {
			background: url(http://image.qxgm.site/tdz/img/tk/shan1.png);
			background-size: 100% auto;
			position: absolute;
			right: 10px;
			top: -105px;
			z-index: 88888;
			width: 60px;
			height: 60px;
			text-align: center;

			.img {
				width: 80%;
				margin-top: 6px;
				margin-left: 5px;
			}

			.p1 {
				position: absolute;
				color: #ffffff;
				bottom: 0px;
				left: 3px;
				text-shadow: 0 1px 1px #a93939;
			}
		}
	}

	.warp3 .yun_mask {
		position: absolute;
		left: 0;
		top: -8%;
		width: 43%;
		z-index: 9;
	}

	.warp3 .m_info3 {
		display: block;
		margin: 0 auto;
		width: 100%;
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		min-height: 280px;
		padding: 1% 6px 10px;
		box-sizing: border-box;
	}

	.warp3 .caolist {
		display: flex;
		flex-wrap: wrap;
		height: 196px;
		overflow-y: scroll;
		background: url(http://image.qxgm.site/tdz/img/daolv/mg-02.png) no-repeat;
		background-size: 100% 100%;
		padding: 5px 7px;

		.link {
			position: relative;
			width: 20%;
			margin-bottom: 10px;
		}

		.cparts {
			position: relative;
			background: url(http://image.qxgm.site/tdz/img/liandan/tanbg.png) no-repeat;
			background-size: 100% 100%;
			padding: 7px 11px;
			box-sizing: border-box;

			.num {
				color: #FFFFFF;
				text-shadow: 0 1px 1px #000000;
				position: absolute;
				right: 4px;
				bottom: 4px;
				font-size: 12px;
			}
		}

		.cpart::after {
			position: absolute;
			content: '';
			width: 100%;
			height: 100%;
			background: url(http://image.qxgm.site/tdz/img/liandan/tanbg2.png) no-repeat;
			background-size: 100% 100%;
			top: 0;
			left: 0;
		}

		.cq1 {
			width: 100%;
		}

		.cq2 {
			width: 94%;
			text-align: center;
			position: absolute;
			bottom: 4px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 12px;
			font-weight: normal;
			color: #FFFEFE;
			line-height: 20px;
			text-shadow: 0 1px 1px #000;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-18.png) no-repeat;
			background-size: 100% 100%;
		}

		.cq3 {
			width: 42px;
			height: 20px;
			position: absolute;
			text-align: center;
			top: -5px;
			left: -7px;
			font-size: 12px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 20px;
			zoom: 0.92;
			text-shadow: 0 1px 1px #653333;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-10.png) no-repeat;
			background-size: 100% 100%;
		}


		.cname {
			font-size: 12px;
			font-weight: normal;
			color: #FFFFFF;
			text-shadow: 0 1px 2px #000000;
			line-height: 14px;
			margin-top: 4px;
			text-align: center;
		}

	}

	.warp3 .m_close3 {
		position: absolute;
		top: -5%;
		right: 8px;
		width: 32px;
	}

	.showHandler {
		animation: showHandler 0.8s forwards ease;
	}

	.hideHandler {
		animation: hideHandler 0.8s forwards ease;
	}

	@keyframes showHandler {
		0% {
			bottom: -50%;
		}

		100% {
			bottom: 0%;
		}
	}

	@keyframes hideHandler {
		0% {
			bottom: 0%;
		}

		100% {
			bottom: -50%;
		}
	}

	.warp3 .title {
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-05.png) no-repeat;
		background-size: 100% 100%;
		padding: 0px 0 6px;

		image {
			width: 18%;
		}

		text {
			font-size: 20px;
			font-weight: normal;
			color: #50463E;
			line-height: 20px;
			margin: 0 13px;
		}
	}

	.sendAll1 {
		display: block;
		margin: 5px auto 0;
		width: 116px;
		height: 37px;
		text-align: center;
		line-height: 37px;
		font-size: 18px;
		font-weight: normal;
		color: #ffffff !important;
		text-shadow: 0 1px 1px #CB6500 !important;
		background: url(http://image.qxgm.site/tdz/img/active/8.png) no-repeat;
		background-size: 100% 100%;
	}

	.sendAll2 {
		display: block;
		margin: 5px auto 0;
		width: 116px;
		height: 37px;
		text-align: center;
		line-height: 37px;
		font-size: 18px;
		font-weight: normal;
		color: #fdf0c4;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
		background-size: 100% 100%;
	}


	//突破
	.through {
		position: absolute;
		top: 30%;
		left: 0;
		right: 0;
		z-index: 9;

		.m_close4 {
			position: absolute;
			bottom: -40px;
			color: #F1E0C8;
			left: 0;
			right: 0;
			text-align: center;
		}

		.img {
			width: 100%;
		}

		.box {
			min-height: 200px;
			background: #fff4e8;
			margin-top: -5px;
			padding: 5px 5px 20px 5px;
			box-sizing: border-box;
			position: relative;



			.title1 {
				width: 80%;
				display: flex;
				align-items: center;
				margin: auto;
				justify-content: center;
				padding: 10px 0 8px;

				.img2 {
					width: 18%;
				}

				.sgabb {
					font-size: 18px;
					font-weight: normal;
					color: #50463E;
					line-height: 20px;
					margin: 0 13px;

					text {
						color: #CC6600;
						margin-left: 4px;
					}
				}
			}

			.title {
				margin-top: 5px;
				font-size: 16px;
				color: #333333;
			}

			.caolist {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				overflow-y: scroll;
				background: url(http://image.qxgm.site/tdz/img/daolv/mg-02.png) no-repeat;
				background-size: 100% 100%;
				padding: 5px 7px;

				.link {
					position: relative;
					width: 24%;
				}

				.cparts {
					display: block;
					width: 86%;
					margin: 0 auto;
					position: relative;
					background: url(http://image.qxgm.site/tdz/img/liandan/tanbg.png) no-repeat;
					background-size: 100% 100%;
					padding: 7px 11px;
					box-sizing: border-box;

					.num {
						color: #FFFFFF;
						position: absolute;
						right: 4px;
						bottom: 4px;
						font-size: 12px;

						.text1 {
							color: #FF0033;
						}

						.text2 {
							color: #fff;
						}
					}
				}

				.cpart::after {
					position: absolute;
					content: '';
					width: 100%;
					height: 100%;
					background: url(http://image.qxgm.site/tdz/img/liandan/tanbg2.png) no-repeat;
					background-size: 100% 100%;
					top: 0;
					left: 0;
				}

				.cq1 {
					width: 100%;
				}

				.cq2 {
					width: 94%;
					text-align: center;
					position: absolute;
					bottom: 4px;
					left: 50%;
					transform: translateX(-50%);
					font-size: 12px;
					font-weight: normal;
					color: #FFFEFE;
					line-height: 20px;
					text-shadow: 0 1px 1px #000;
					background: url(http://image.qxgm.site/tdz/img/equipment/mg-18.png) no-repeat;
					background-size: 100% 100%;
				}

				.cq3 {
					width: 42px;
					height: 20px;
					position: absolute;
					text-align: center;
					top: -5px;
					left: -7px;
					font-size: 12px;
					font-weight: normal;
					color: #FFFFFF;
					line-height: 20px;
					zoom: 0.92;
					text-shadow: 0 1px 1px #653333;
					background: url(http://image.qxgm.site/tdz/img/equipment/mg-10.png) no-repeat;
					background-size: 100% 100%;
				}


				.cname {
					font-size: 12px;
					font-weight: normal;
					color: #FFFFFF;
					text-shadow: 0 1px 2px #000000;
					line-height: 14px;
					margin-top: 4px;
					text-align: center;
					zoom: 0.92;
				}

			}

			.bgbox {
				background: #eddee0;
				padding: 5px 5px 10px;
				box-sizing: border-box;

				.bfb {
					color: #333333;
					font-size: 16px;
					margin-top: 5px;
					text-align: center;

					text {
						color: #FF0000;
					}
				}
			}
		}

		.titlebox {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 80%;
			margin: auto;

			image {
				width: 15%;
			}

			.p1 {
				font-size: 24px;
				background: linear-gradient(0deg, #7D2E26 0%, #AA372D 48.486328125%, #822D2A 99.6337890625%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}

	.loginimg {
		position: absolute;
		left: 0;
		right: 0;
		top: 20%;

		.img {
			width: 100%;
		}

		.sendAll3 {
			display: block;
			margin: 14px auto 0;
			width: 116px;
			height: 37px;
			text-align: center;
			line-height: 37px;
			font-size: 18px;
			font-weight: normal;
			color: #fdf0c4;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
			background-size: 100% 100%;
			position: absolute;
			bottom: 6%;
			right: 13%;
		}
	}

	.renboxx {
		position: relative;

		.char_img {
			position: relative;
			width: 80%;
			transform: translateX(0%);
			display: block;
			margin: 2vh auto 0;
			z-index: 9;
		}

		.texiaogif {
			position: absolute;
			width: 64%;
			bottom: -11%;
			left: 50%;
			transform: translateX(-50%);
			height: 240px;
			background: url(http://image.qxgm.site/tdz/img/home/guangxiao.png);
			background-size: 100% auto;
			animation: changesbig3 0.8s steps(4) infinite;
		}


		@keyframes changesbig3 {

			/* 这个0%表示开始状态 */
			0% {
				background-position: 0 0;
			}

			/* 这个100%表示结束状态 */
			100% {
				background-position: 0 100%;
			}
		}
	}

	.biginfo {
		position: relative;

		.bsimg {
			width: 100%;
		}
	}

	.plist {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 14px;

		.parts {
			width: 25%;
			box-sizing: border-box;
		}

		.sbimg {
			display: block;
			margin: 0 auto;
			width: 64%;
			padding: 3% 7%;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-12.png) no-repeat;
			background-size: 100% 100%;
		}

		.tanimg {
			width: 100%;
		}

		.toan {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-top: 12px;
			text-align: center;
		}

	}

	.refineCon2 {
		display: block;
		margin: 23px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}


	.zy {
		animation: zymover linear .8s infinite;
	}

	@keyframes zymover {
		0% {
			transform: rotate(0);
		}

		25% {
			transform: rotate(10deg);
		}

		50% {
			transform: rotate(0);
		}

		75% {
			transform: rotate(-10deg);
		}

		100% {
			transform: rotate(0);
		}
	}

	.plistss {
		margin-top: 14px;

		.clst1 {
			font-weight: normal;
			font-size: 20px;
			color: #333333;
			line-height: 22px;
			text-align: center;
		}

		.clst2 {
			font-weight: normal;
			font-size: 20px;
			color: #333333;
			line-height: 24px;
			text-align: center;
			margin-top: 22px;
		}

		.tcolor {
			color: #FF6699;
		}
	}

	.refineCon2 {
		display: block;
		margin: 23px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}
</style>